<template>
  <div class="">
    <el-form :model="form" label-width="120px">
      <el-form-item label="方案分类">
        <el-select
            v-model="form.schemeClassificationList"
            multiple
            value-key="id"
            collapse-tags
            collapse-tags-tooltip
            clearable
            filterable
            placeholder="请选择方案分类"
            :max-collapse-tags="1"
            style="width: 240px"
        >
          <el-option
              v-for="schemeClassification in schemeClassificationOptionList"
              :key="schemeClassification.id"
              :label="schemeClassification.classificationName"
              :value="schemeClassification"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="方案类型">
        <el-checkbox-group v-model="form.schemeTypeList">
          <el-checkbox label="练习" name="type" />
          <el-checkbox label="闯关" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="方案类型">
        <el-checkbox-group v-model="form.languageTypeList">
          <el-checkbox label="中文" name="languageType"/>
          <el-checkbox label="英文" name="languageType" />
          <el-checkbox label="其他" name="languageType" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="年龄段">
        <el-radio-group v-model="form.ageStage">
          <el-radio-button label="9岁以下" />
          <el-radio-button label="6~12岁" />
          <el-radio-button label="12~15岁" />
          <el-radio-button label="15~18岁" />
          <el-radio-button label="无限制" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="价格区间">
          <el-col :span="4">
            <el-button text :style="{color:computedFreePriceColor}" @click="form.freePrice=true">免费</el-button>
          </el-col>
          <el-col :span="6">
            <el-input
                v-model="form.minPrice"
                placeholder="最小值"
                :prefix-icon="Money"
                :formatter="priceFormatter"
                :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
            />
          </el-col>
          <el-col :span="2">-</el-col>
        <el-col :span="6">
          <el-input
              v-model="form.maxPrice"
              :prefix-icon="Money"
              placeholder="最大值"
              :formatter="priceFormatter"
              :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
          />
        </el-col>


      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import {Money} from "@element-plus/icons";
import {SchemeClassification} from "@/ts/scheme";
import {getCfListPage} from "@/api/classification/ClassificationApi";
import useConfigStore from "@/store/globalSettingStore"

let useConfig=useConfigStore()
  let form=ref({
    ageStage:0,
    schemeClassificationList:[],
    schemeTypeList:[],
    languageTypeList:[],
    freePrice:false,
    minPrice:0,
    maxPrice:0
  })
  let computedFreePriceColor=computed(()=>{
      return form.value.freePrice?'#409EFF':''
  })
  let schemeClassificationOptionList=ref<SchemeClassification[]>([])
let priceFormatter=(value:string) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')


getClassificationList()
function getClassificationList(){
   schemeClassificationOptionList.value=useConfig.classificationOptions
  console.log(schemeClassificationOptionList.value)
}
</script>

<style scoped lang="less">

</style>